<template>
  <view class="page-my">
    <view class="w-100 h-100 top0 left0 ov-hd-y">
      <image
        class="h400 w-100 bg-theme_8"
        src="../../static/icon_user_bg.png"
      />
      <view class="w-100 ab top0 left0 h400">
        <swiper
          class="swiper w-100 h400"
          @change="change"
          :indicator-dots="indicatorDots"
          :autoplay="autoplay"
          :interval="interval"
          :duration="duration"
        >
          <swiper-item v-for="item in list" :key="item.id">
            <ImageFile :url="item.thumbnail" className="w-100 h-100" />
          </swiper-item>
        </swiper>
      </view>
      <view class="w-100 w-t-f re bg-f8ff h658 re z-999">
        <view class="pt-4">
          <UserLogin></UserLogin>
        </view>
        <view class="w-100 px-3 pt-6">
          <view class="w-100">
            <view class="w-100 f-c-c font28 h28 re ty-user-serve">
              <view class="re bg-f8ff px-2" style="z-index: 2">我的服务</view>
            </view>
            <view class="w-100 pt-3 f-a-c px-3">
              <template v-for="(item, index) in serve">
                <view
                  v-if="item.url"
                  class="fs-n-c"
                  :key="index"
                  @click="get_url(item.url)"
                >
                  <image :src="item.icon" class="w60 h60" />
                  <view class="w-100 f-c-c t-8 pt-1 font21">{{
                    item.title
                  }}</view>
                </view>
                <view v-else class="re fs-n-c" :key="index">
                  <button
                    class="ty-contact"
                    type="default"
                    open-type="contact"
                  ></button>
                  <image :src="item.icon" class="w60 h60" />
                  <view class="w-100 f-c-c t-8 pt-1 font21">{{
                    item.title
                  }}</view>
                </view>
              </template>
            </view>

            <view class="w-100 mt-3 f-c-c t-8 pt-1 font22" @click="te_phone()"
              >客服联系电话：{{ orgInfo.contactMobile }}</view
            >
          </view>
        </view>
      </view>
      <!-- 16像素是因为首页多加了一个高度16像素的指示面板  -->
      <view class="w-100 h30" v-if="!height_show"></view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Footer from "../../components/footer.vue"; //底部导航
import Horn from "../../components/horn.vue"; // 转角
import UserLogin from "../../components/user_login.vue"; // 用户登录信息
import ImageFile from "../../components/img_file.vue";
import isLoginMxin from "../../common/isLogin.js";
import { banner_list } from "../../api/mall.js";
import { levelList, dataStatistics } from "../../api/user.js";
import { getOrgListByMobile } from "../../api/user";
export default {
  props: {
    orgInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  components: {
    Footer,
    Horn,
    UserLogin,
    ImageFile,
  },
  mixins: [isLoginMxin],
  data() {
    return {
      list: [],
      indicatorDots: true,
      autoplay: true,
      interval: 80000,
      duration: 500,
      equity_list: [],
      current: 0,
      serve: [
        {
          title: "我的订单",
          url: "order",
          icon: "../../static/icon_user_4.png",
        },
        // {
        //   title: "我的客服",
        //   url: "",
        //   icon: "../../static/icon_user_6.png",
        // },
        // {
        //   title: "分销统计",
        //   url: "fenxiao",
        //   icon: "../../static/icon_user_5.png",
        // },
        {
          title: "意见反馈",
          url: "/pages/my/set/feedback",
          icon: "../../static/icon_user_7.png",
        },
      ],
      height_show: true, // 设计为一屏 按照812设置 低于这个高度 需要底部撑起来
      phone: "18611222899",
      statistics: {},
    };
  },
  computed: {
    ...mapState("user", ["isLogin"]),
  },
  watch: {
    isLogin() {
      if (this.isLogin) {
        this.get_equity();
        this.get_dataStatistics();
        this.get_banner_list();
      }
    },
  },
  created() {
    if (this.isLogin) {
      this.get_equity();
      this.get_banner_list();
      // this.get_dataStatistics()
    }
    const { screenHeight } = uni.getStorageSync("systemInfo");
    //设计为一屏 按照812设置 低于这个高度 需要底部撑起来
    this.height_show = screenHeight >= 812;
  },
  onShow() {
    if (this.isLogin) {
      this.get_dataStatistics();
    }
  },

  onLoad(option) {
    console.log("aagerzx", option);
    let userInfo = uni.getStorageSync("userInfo") || {};
    if (!userInfo.phone) {
      this.serve = this.serve.filter((v) => v.url !== "fenxiao");
    }
  },

  methods: {
    async get_banner_list() {
      const { code, body } = await banner_list({ goodsType: "ACTIVITY" });
      if (code === "0") {
        this.list = body.records.filter((item) => item.enabled);
      }
    },
    get_dataStatistics() {
      dataStatistics().then((res) => {
        if (res.code == 0) {
          this.statistics = res.body;
        }
      });
    },
    async get_equity() {
      // const { code, body } = await levelList();
      // if (code === "0") {
      //   let equity_list = body.records || [];
      //   equity_list.map((item) => {
      //     item.remarks = item.remark;
      //     if (item.remark.indexOf("xx") > -1) {
      //       item.remarks = item.remark.replace(/xx/gi, item.badgeNum);
      //     }
      //   });
      //   this.equity_list = equity_list;
      // }
    },
    change(e) {
      this.$forceUpdate();
      this.current = e.detail.current;
    },
    // 跳转路径
    get_url(url) {
      if (!this.isLogin) {
        return uni.showToast({
          title: "请先登录",
          icon: "none",
        });
      }
      if (url === "fenxiao") {
        return this.handleFenxiao();
      }
      // 我的客服 直接跳转客服聊天
      if (url) {
        if (url === "order") {
          uni.navigateTo({
            url: "/pages/orderPage/index",
          });
          return;
        }
        uni.navigateTo({
          url,
        });
      }
    },
    get_url_my(val) {
      if (!this.isLogin) {
        return uni.showToast({
          title: "请先登录",
          icon: "none",
        });
      }
      uni.navigateTo({
        url: `/pages/my/${val}/${val}`,
      });
    },
    async handleFenxiao() {
      let userInfo = uni.getStorageSync("userInfo") || {};
      if (!userInfo.phone) {
        return uni.showToast({
          title: "暂无关联旅行社",
          icon: "none",
        });
      }
      const { body } = await getOrgListByMobile({
        mobile: userInfo.phone || "",
      });
      if (!body || !body.length) {
        return uni.showToast({
          title: "暂无关联旅行社",
          icon: "none",
        });
      }
      uni.navigateTo({
        url: "/pages/travelOrders/index",
      });
    },
    set_change(type) {
      // current 是0开始 最后一个是 list长度-1 ，已经是最后一个再次点击next跳转到第一个 else ++
      // 第一个点击上一个 跳转到最后一个 current = list -1 else --
      if (type == "next") {
        if (this.current >= this.equity_list.length - 1) {
          return (this.current = 0);
        }
        this.current++;
      } else {
        if (this.current == 0) {
          return (this.current = this.equity_list.length - 1);
        }
        this.current--;
      }
    },
    te_phone() {
      uni.makePhoneCall({
        phoneNumber: this.orgInfo.contactMobile.toString(), //电话号码
        success: function (e) {
          console.log(e);
        },
        fail: function (e) {
          console.log(e);
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.page-my {
  height: 100%;
  background-color: #f7fdff;
}
.ty-contact {
  width: 80%;
  height: 80%;
  position: absolute;
  top: 10%;
  left: 10%;
  z-index: 999;
  opacity: 0;
}
.swiper {
  .ty-img {
    width: 100%;
    height: 100%;
  }
}

.h938 {
  height: 938rpx;
  z-index: 9;
  position: relative;
}

.w-t-f {
  z-index: 88;
}

.ty-user-line {
  &:after {
    content: "";
    width: 1rpx;
    height: 127rpx;
    left: 33.33%;
    top: 16rpx;
    background: #ccc;
    position: absolute;
  }

  &::before {
    content: "";
    width: 1rpx;
    height: 127rpx;
    left: 66.66%;
    top: 16rpx;
    background: #ccc;
    position: absolute;
  }
}

.ty-user-serve {
  .ty-serve {
    padding: 0 18rpx;
    background: #fff;
    position: absolute;
    z-index: 2;
  }

  &:after {
    content: "";
    width: 100%;
    height: 1rpx;
    top: 50%;
    left: 0;
    background: #ccc;
    position: absolute;
    z-index: 1;
  }
}

.border-cur {
  border: 2rpx solid #8cfa3c;
  color: #fffefe;
}
</style>
